import React from 'react';
import {GTable} from 'geminis-react';
import {Button} from 'antd';

export default () => {
  const schema = {
    headerTitle: 'CRUD操作',
    data: {
      url: '/api/users',
      filter: {
        type: 'crud'
      },
      include: ['child'],
      sorts: ['testField']
    },
    search: {
      labelWidth: 'auto',
    },
    action: {
      toolbar: {
        add: {
          button: {
            modal: {
              width: "800px"
            }
          },
          form: {
            schemaPath: '/form/schema.json'
          }
        },
        delete: true,
        excelExport: true,
        excelImport: true
      },
      row: {
        delete: {text: '删除1'},
        deleteVisible: (record: any) => {
          return record.age % 2 === 0
        },
        edit: true,
        editVisible: (record: any) => {
          return record.age % 2 === 1
        },
        props: {
          width: '200px',
        },
        render: (record) => [
          <Button
            key={record.id}
            type="link"
            onClick={() => {
              alert(record.id);
            }}
          >
            自定义按钮-row
          </Button>,
        ],
      },
      idGetter: {
        editId: (record: any) => {
          return record.id
        }
      }
    },
    toolBarRender: () => [<Button>自定义按钮-toolbar</Button>],
    pagination: {
      defaultPageSize: 5,
    },
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        filterType: 'text',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        search: false,
      },
      {
        title: 'Title',
        dataIndex: 'data',
        filterType: 'date',
        render: (data) => data.title,
      },
      {
        title: 'Birthday',
        dataIndex: 'birthday',
        valueType: 'date',
      },
    ],
  };

  return (
    <GTable schema={schema}/>
  );
};
